<template>
  <div >
    <!--表单-->
    <nf-el-form
      v-model="model"
      :partModel="partModel"
      v-bind="formMeta"
    />
    <!--按钮-->
    <nf-button
      :moduleId="moduleId"
    />
    {{moduleId}}={{dataId}}
    <!--列表-->
    <nf-el-grid
      v-bind="girdMeta"
      :data-list="dataList"
      :selection="dataListState.choice"
    />
    <!--分页-->
    <nf-pager/>
    <el-button type="" @click="reload">更新meta</el-button>
  </div>
</template>

<script>
import { defineProps, reactive, watch, computed } from 'vue'
// 控制函数
import dataListManage from '../../controller/state-list.js'
// 表单组件
// eslint-disable-next-line import/no-absolute-path
import nfElForm from '/ctrl/nf-el-form/el-form-div.vue'
// 列表控件
// eslint-disable-next-line import/no-absolute-path
import nfElGrid from '/ctrl/nf-el-grid/nf-el-grid-list.vue'
// 按钮组件
import nfButton from './button.vue'
// 分页组件
import nfPager from './pager.vue'

// 重新加载
// eslint-disable-next-line import/no-absolute-path
import reloadMeta from '/service-reloadMeta'

// 轻量级状态
// eslint-disable-next-line import/no-absolute-path
import { state } from 'nf-state'
</script>

<script setup>

reloadMeta()

// 属性：模块ID
const props = defineProps({
  moduleId: [Number, String],
  actionId: [Number, String],
  dataId: [Number, String], // 修改或者显示的记录的ID
  type: String // 类型：添加、修改、查看
})

// 模块ID + 表单ID = 自己的标志
const modFormId = computed(() => props.moduleId.toString() + props.actionId.toString())
const formId = computed(() => props.moduleId.toString() + props.actionId.toString())

// 列表用的 meta
const girdMeta = state.projectMeta[props.moduleId].grid
// 表单用的 meta
const formMeta = state.projectMeta[props.moduleId].forms[formId.value]
formMeta.events = {
  reset: () => {}
}

// 表单控件的 model
const model = reactive({})
// 定义局部的 model
const partModel = reactive({})

// 列表的状态管理类
const {
  dataList, // 数据列表
  regDataListState, // 注册列表状态
  setHotkey // 设置快捷键
} = dataListManage(props.moduleId)

// 注册列表状态
const dataListState = regDataListState()
// 设置快捷键
setHotkey(dataListState)

watch(() => props.dataId, () => {
  if (typeof props.dataId !== 'undefined') {
    dataListState.fixedQuery[girdMeta.foreignIdName] = [401, props.dataId]
    dataListState.reloadFirstPager()
    console.log('ssss', dataListState.query)
  }
},
{ immediate: true }
)

// 重新加载meta的json文件
const reload = () => {
  reloadMeta(props.moduleId)
}
</script>
